<template>
  <div>
    <!-- 表格 -->
    <template>
      <el-table  
        :data="all"
        border
        stripe
        style="width: 100%; margin-top: 10px"
      >
        <!-- # -->
        <el-table-column type="index" label="#" width="50"> </el-table-column>
        <!-- 权限名称 -->
        <el-table-column prop="authName" label="权限名称"> </el-table-column>
        <!-- 路径 -->
        <el-table-column prop="path" label="路径"> </el-table-column>
        <!-- 权限等级 -->
        <el-table-column label="权限等级">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.level == 0"
              class="button1"
              type=""
              >一级</el-button
            >
            <el-button
              size="mini"
              v-if="scope.row.level == 1"
              class="button2"
              type=""
              >二级</el-button
            >
            <el-button
              size="mini"
              v-if="scope.row.level == 2"
              class="button3"
              type=""
              >三级</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
    <!-- 表格 -->


<script>
//引入
import { rights } from "@/request/api.js";
export default {
  data() {
    return {
      tableData: [],  //页面渲染数据
      data:[], //备份数据
      params:{
        pagesize:5,
        pagenum:1
      }
    };
  },
  methods: {
    //渲染数据
    getList() {
      rights().then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.data = res.data.data;
      });
    },
    // 分页
    //每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pagesize =  val
    },
    //当前第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pagenum = val
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    
  },
  components: {},
  computed: {
    all(){
      //公式：(当前页-1) *每页多少条，当前页*每页多少条
      return this.data.slice(
        (this.params.pagenum - 1) *this.params.pagesize,
        this.params.pagesize * this.params.pagenum
      )
    }
  },
  watch: {},
};
</script>

<style lang='scss' scoped>
.button1 {
  background-color: #cae4ff;
  color: #3f9eff;
}
.button2 {
  background-color: #cee8c4;
  color: #67c23a;
}
.button3 {
  background-color: #f7e5c8;
  color: #e6a23c;
}
</style>
